<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no,email=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>打碟活动</title>
    <link rel="stylesheet" href="./css/public.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
    <script src="./js/htmlfontsize.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/tool.js"></script>
    <script src="./js/flex.js"></script>
</head>
<body>
<div v-cloak="" id="app">
    <div class="top">
        <div class="top-close" @click="close_h5">
            <img src="./images/close.png" alt="">
        </div>
        <div class="minute">
            <div class="count-minute" v-for="v in minute_arr">
                <div class="number">{{v}}</div>
            </div>
            <div class="second">秒</div>
        </div>
    </div>

    <div id="svgaBox" :style="backgroundDiv" class="dish-img"></div>
    <div class="right-img">
        <div class="my-award" @click="openDialog"></div>
        <div class="ac-rule" @click="toRuleOpen()"></div>
    </div>

    <div class="click-dish" @click="clickDish">
        <p>{{click_msg}} <span>{{click_num_msg}}</span></p>
    </div>
    <div class="my-diamond">
        <p>现有钻石:<span>{{diamond}}</span></p>
    </div>

    <div class="award-list">
        <div class="gift-list">
            <div class="title-img"></div>
            <div class="list">
                <div class="gift-info">
                    <div class="gift-img">
                        <img src="./images/princess.png" alt="">
                    </div>
                    <p>拇指姑娘</p>
                    <p>100000钻石</p>
                </div>

                <div class="gift-info">
                    <div class="gift-img">
                        <img src="./images/diamond.png" alt="">
                    </div>
                    <p>钻石曲别针</p>
                    <p>58800钻石</p>
                </div>
                <div class="gift-info">
                    <div class="gift-img">
                        <img src="./images/tiger.png" alt="">
                    </div>
                    <p>幸运小老虎</p>
                    <p>19900钻石</p>
                </div>
                <div class="gift-info">
                    <div class="gift-img">
                        <img src="./images/music.png" alt="">
                    </div>
                    <p>音浪</p>
                    <p>188</p>
                </div>


            </div>
        </div>

    </div>

    <div v-if="alertMsg" class="dialog">
        <p class="dialog-title">提示</p>
        <p class="dialog-msg">{{dialog_message}}</p>
        <div class="dialog-close" @click="alertMsg = false">
            <p>知道了</p>
        </div>
    </div>
    <div v-if="alertDiamondMsg" class="dialog">
        <p class="dialog-title">提示</p>
        <p class="dialog-msg">您的钻石不足，请充值</p>
        <div class="dialog-close" @click="lack_diamond">
            <p>知道了</p>
        </div>
    </div>

    <div v-if="payDish" class="dialog">
        <p class="dialog-title">提示</p>
        <p class="dialog-msg">{{text_msg}}</p>
        <div class="dialog-click" @click="hideDialog()">
            <p @click="payClickDIsh">确定</p>
            <p @click="payDish = false">取消</p>
        </div>
    </div>

    <div v-if="logDish" class="dialog-log">
        <div class="log-title">
            <div class="title-left" @click="logDish = false"></div>
            <div class="title-msg">
                <p>我的奖励</p>
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in log_list" class="content-line">
                <p>{{item.date}}</p>
                <p>{{item.msg}}</p>
                <p>{{item.type}}</p>
            </div>
        </div>
    </div>
    <div v-if="ruleDish" class="dialog-log">
        <div class="log-title">
            <div class="title-left" @click="ruleDish = false"></div>
            <div class="title-msg">
                <p>活动规则</p>
            </div>
        </div>
        <div class="content-rule">
            <p> 1、活动期间可消耗钻石参与打碟机，100%中奖；</p>
            <p> 2、每轮奖励10人以上参与打碟机进入爆机阶段（幸运增加），开奖时间结束后该轮奖励自动发送到您背包内，记得及时参与哦！</p>
            <p> 3、每轮打碟机单人可重复参加且可抽取对应次数奖励，上不封顶；</p>
            <p> 4、打碟机每日整点自动开启，每次持续5场可免费参与，每日3:00-9:00修整期非整点开启；</p>
            <p> 5、活动期间主持可消耗少量钻石手动创建新一轮打碟机，在房间OR排队设置内操作,不限制创建次数；</p>
            <p> 6、厅内每次仅展示一个打碟,不可叠加;</p>
            <p> 7、活动最终解释权归声撩所有；</p>
        </div>

    </div>
    <!--    <div class="overlay" onclick="hideDialog()"></div>-->

</div>
</body>


<script type="module">
    var app = new Vue({
        el: '#app',
        data: {
            listStage: 1,
            baseUrl: 'http://ztaudio-activity.kekestar.cn',
            baseApiUrl: "https://sl-api.bianxiangapp.com:8866",
            List: [],
            Curr: [],
            log_list: [],
            room_id: 0,
            user_id: 0,
            minute: ['', '', ''],
            minute_arr: ['', '', ''],
            consumerDiamond: ['50', '150', '270', '500'],
            diamond: 0,
            dish_type: 0,//0免费 1付费 2为没有开启打碟
            level: 0,//打碟等级
            second_str: 0,//倒计时初始时间
            timer: '',
            click_num_msg: '',
            click_num: '',
            click_msg: '点击参与',
            text_msg: '确认参与打碟活动吗？',
            dialog_message: '简单的提示~',
            canShowTip: false,
            overlayShow: false,
            alertMsg: false,
            alertDiamondMsg: false,
            payDish: false,
            logDish: false,
            ruleDish: false,
            imgPath: '',
            update_html: 0,
            update_msg: 0,
            pngImgPath: '',
            clickPay: true,
            timer: true,
            timeout_click: 0,
            backgroundDiv: {
                backgroundImage: ''
            },
            pngImg: [
                '/dish/images/baise.png',
                '/dish/images/hongse.png',
                '/dish/images/huangse.png',
                '/dish/images/lvse.png',
                '/dish/images/juse.png'
            ],
            svgaImg: [
                '/dish/images/baise.svga',
                '/dish/images/hongse.svga',
                '/dish/images/huangse.svga',
                '/dish/images/lvse.svga',
                '/dish/images/juse.svga'
            ]
        },
        computed: {},

        mounted() {
            //定时任务
            this.dishInfo()
        },
        methods: {
            intervalTime() {
                let _this = this
                let api_num = 0;
                let arr_minute = _this.second_str;
                _this.timer = setInterval(() => {
                    arr_minute = arr_minute.toString()
                    _this.minute_arr = arr_minute.split('');
                    if (arr_minute >= 0) {
                        if (_this.dish_type == 2 && _this.update_msg == 0) {
                            _this.dialog_message = '未开启打碟活动~请联系主持开启';
                            _this.alertMsg = true;
                            _this.payDish = false;
                        }
                        _this.update_msg++;
                        if (_this.update_html > 0) {
                            _this.update_html++;
                        }
                        arr_minute = new Number(arr_minute)
                        arr_minute--;
                    } else {
                        _this.minute_arr = ['0', '0', '0'];
                    }
                    if (api_num > 3) {
                        api_num = 0;
                        _this.dishInfo();
                    }
                    api_num++;
                }, 1000)

            },
            dishInfo() {
                let _this = this

                _this.room_id = kk.$_GET['room_id'];
                _this.user_id = kk.$_GET['user_id'];
                kk.ajaxGet(_this.baseUrl + '/dish/userDishInfo', {
                    room_id: _this.room_id,
                    user_id: _this.user_id
                }, function (res) {
                    _this.List = res.data
                    _this.minute = _this.List.timeout
                    let arr = _this.List.timeout
                    _this.dish_type = _this.List.type

                    if (_this.click_num == '') {
                        _this.backgroundDiv.backgroundImage = 'url(' + ('' + _this.baseUrl + _this.pngImg[_this.List.level] + '') + ')'
                    }

                    if (_this.dish_type == 0 && arr[2] == '0') {
                        _this.click_num = '';
                        _this.click_num_msg = ''
                        _this.delSvga();
                    }
                    if (_this.dish_type == 2) {
                        _this.click_num = '';
                        _this.click_num_msg = ''
                        _this.delSvga();
                    }
                    _this.click_msg = _this.List.message
                    _this.level = _this.List.level
                    _this.diamond = _this.List.diamond
                    _this.second_str = _this.List.second
                    clearInterval(_this.timer);
                    _this.intervalTime()
                })

                if (_this.update_html > 10 && _this.dish_type == 1) {
                    //重置暴击
                    _this.click_num = '';
                    _this.click_num_msg = ''
                    _this.delSvga()
                    _this.update_html = 0;
                    _this.dishInfo();
                }

            },

            clickDish() {
                let _this = this
                _this.room_id = kk.$_GET['room_id'];
                _this.user_id = kk.$_GET['user_id'];

                if (_this.dish_type == 2) {
                    _this.dialog_message = '未开启打碟活动，请稍后重试';
                    _this.alertMsg = true;
                    _this.payDish = false;
                } else if (_this.dish_type == 0) {//免费
                    // this.payDish = true;
                    kk.ajaxGet(_this.baseUrl + '/dish/clickAward', {
                        room_id: _this.room_id,
                        user_id: _this.user_id,
                        type: _this.dish_type,
                    }, function (res) {
                        if (res.code != 200) {
                            _this.payDish = false;
                            _this.dialog_message = res.message
                            _this.alertMsg = true
                        } else {
                            //点击暴击
                            _this.alertMsg = false
                            _this.payDish = false;
                            if (_this.click_num <= 1) {
                                _this.backgroundDiv.backgroundImage = ''
                                _this.imgPath = _this.baseUrl + _this.svgaImg[_this.List.level]
                                _this.selectSvga(_this.imgPath)
                            }
                            _this.click_num++;
                            _this.click_num_msg = 'X 1'
                        }
                    })
                } else {
                    if (_this.diamond * 1000 < _this.consumerDiamond[_this.List.level]) {
                        //钻石不足
                        _this.alertDiamondMsg = true;
                    } else if (_this.click_num == 0) {
                        _this.text_msg = '是否消耗' + _this.consumerDiamond[_this.List.level] + '钻石';
                        _this.payDish = true;
                    } else {
                        _this.update_html = 1;
                        if (_this.dish_type == 1) {
                            _this.payClickDIsh()
                        }
                    }
                }
                _this.dishInfo()
            },
            //点击跳转充值
            lack_diamond() {
                kk.pay()
            },
            payClickDIsh() {
                let _this = this
                _this.payDish = false
                _this.room_id = kk.$_GET['room_id'];
                _this.user_id = kk.$_GET['user_id'];
                //扣款 {
                kk.ajaxGet(_this.baseUrl + '/dish/clickAward', {
                    room_id: _this.room_id,
                    user_id: _this.user_id,
                    level: _this.List.level,
                    type: _this.dish_type,
                }, function (res) {
                    if (res.code == 4001) {
                        //钻石不足
                        _this.alertDiamondMsg = true;
                    } else if (res.code != 200) {
                        _this.payDish = false;
                        _this.dialog_message = res.message
                        _this.alertMsg = true
                    } else {
                        console.log(111)
                        //点击暴击
                        _this.alertMsg = false
                        _this.payDish = false;
                        if (_this.click_num <= 1) {
                            _this.backgroundDiv.backgroundImage = ''
                            _this.imgPath = _this.baseUrl + _this.svgaImg[_this.List.level]
                            _this.selectSvga(_this.imgPath)
                        }

                        _this.click_num++;
                        _this.click_num_msg = 'X' + _this.click_num
                    }
                })


            },
            toRuleOpen() {
                let _this = this
                let data = {title: '打碟规则', url: _this.baseUrl + '/dish/rule.html'};
                kk.openClientHtml(data)
            },
            close_h5() {
                kk.openClientView({code: 200001})
            },
            openDialog() {
                let _this = this
                _this.room_id = kk.$_GET['room_id'];
                _this.user_id = kk.$_GET['user_id'];
                let data = {
                    title: '奖励记录',
                    url: _this.baseUrl + '/dish/log.html?user_id=' + _this.user_id + '&room_id=' + _this.room_id
                };
                kk.openClientHtml(data)
            },

            hideDialog() {
                let _this = this
                _this.alertMsg = false
            },
            delSvga() {
                let _this = this;
                var parser = new SVGA.Parser('#svgaBox')
                var player = new SVGA.Player('#svgaBox')
                player.clear();
            },
            selectSvga: function (Img) {
                
                let _this = this;
                var parser = new SVGA.Parser('#svgaBox')
                var player = new SVGA.Player('#svgaBox')
                parser.load(Img, function (videoItem) {
                    //可以自己替换特定的图像，请您的设计师告诉您ImageKey:jcdxtouxiang
                    player.setVideoItem(videoItem);
                    player.setText({
                        family: 'microsoft yahei',//setText方法 不传 family 属性 size属性会失效
                        text: 'Hello!',
                        size: "48px",
                        color: "#000",
                        offset: {x: 0.0, y: 0.0}
                    }, 'jcdxnicheng');//ImageKey:jcdxnicheng
                    player.startAnimation();

                    //player.startAnimationWithRange({location: 20, length: 1}, false);
                }, function (error) {
                })
            }
        }
    })
</script>
</html>
